<template>
    <div>
        <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船名">
                        <el-input v-model="condition['search_LIKE_shipName']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次">
                        <el-input v-model="condition['search_LIKE_voyage']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计划类型">
                        <el-select v-model="condition['search_EQ_planType']" placeholder="请选择类型" clearable>
                            <el-option v-for="[key, val] in _dictShipPlanType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="创建日期起">
                        <el-date-picker v-model="condition['search_GTE_createDateTime']"
                                        :picker-options="startPickerOptions" type="date" placeholder="起始日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建日期止">
                        <el-date-picker v-model="condition['search_LTE_createDateTime']" @change="handleChangeEnd"
                                        :picker-options="endPickerOptions" type="date" placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态">
                        <el-select v-model="condition['search_EQ_jobStatus']" placeholder="请选择类型" clearable>
                            <el-option v-for="[key, val] in _dictShipPlanType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerId']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型">
                        <auto-search-entrust v-model="condition['search_LIKE_containerType']"
                                             :name="condition['search_LIKE_containerType']"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业港口">
                        <select-port :name="condition['search_EQ_portCode']"
                                     v-model="condition['search_EQ_portCode']"></select-port>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="尺寸">
                        <auto-search-size v-model="condition['search_LIKE_containerSize']"></auto-search-size>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸">
                        <el-select v-model="condition['search_EQ_tradeType']" placeholder="请选择类型" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船代">
                        <auto-search-custom @selectName="v=>condition['search_LIKE_shipAgentName']=v"
                                            :name="condition['search_LIKE_shipAgentName']"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" class="ml-80" @click="loadData">查 询</el-button>
                    <el-button @click="handleReset">重 置</el-button>
                    <el-button @click="handleExport">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row type="flex" justify="end" class="mt-10 ">
            <div></div>
            <el-col :span="16" style="display: flex;justify-content: space-between">
                <title-point color="#50B155">
                    <div slot="content">
                        总残损箱量TEU :
                        <span style="font-size: 16px">{{ total }}</span>
                    </div>
                </title-point>
                <title-point color="#449DFF">
                    <div slot="content">
                        装船残损量TEU :
                        <span style="font-size: 16px">{{ zc }}</span></div>
                </title-point>
                <title-point color="#30C8CA">
                    <div slot="content">
                        卸船残损量 :
                        <span style="font-size: 16px">{{ xc }}</span></div>
                </title-point>
            </el-col>
        </el-row>
        <el-table :data="list" border stripe max-height="500" class="mt-10" @selection-change="handleSelectionChange" ref="multipleTable">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
            <el-table-column prop="planType" label="计划类型"  min-width="110">
                <template slot-scope="scope">
                    <!--{{ scope.row.planType | _filterShipPlanType }}-->
                    {{ scope.row.planType }}
                </template>
            </el-table-column>
            <el-table-column prop="shipName" label="船名"  min-width="120"></el-table-column>
            <el-table-column prop="voyage" label="航次"  min-width="80"></el-table-column>
            <el-table-column prop="containerId" label="箱号"  min-width="120">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="getRecordDetail(scope.row)">
                        {{ scope.row.containerId }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="80"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="80"></el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="90">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="ef" label="空重"  min-width="80">
                <template slot-scope="scope">
                    {{ scope.row.ef | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="sealNo" label="铅封号"  min-width="100"></el-table-column>
            <el-table-column prop="damagedCode" label="残损代码"  min-width="140">
                <template slot-scope="scope">
                    <span v-for="(item,index) in scope.row.damagedCode.split(',')">
                        {{ item | _filterDamaged }},
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="damagedExplan" label="残损描述" show-overflow-tooltip 
                             min-width="140"></el-table-column>
            <el-table-column prop="remark" label="备注"  min-width="80"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="140"></el-table-column>
            <el-table-column prop="tallyClerk" label="理货人"  min-width="140"></el-table-column>
            <el-table-column prop="tallyTime" label="理货时间"  min-width="160"></el-table-column>
        </el-table>
        <el-row class="bottom" type="flex" justify="space-between" v-show="total>0">
            <div class="oper">

            </div>
            <el-pagination class="page" @size-change="size=>pageInfo.iDisplayLength=size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :current-page.sync="pageInfo.pageStart" :page-sizes="pageInfo.pageArr"
                           :page-size="pageInfo.iDisplayLength" :total="total">
            </el-pagination>
        </el-row>
        <record-detail v-if="recordDetail" @close="recordDetail=false" ref="recordDetail"></record-detail>
    </div>
</template>

<script>
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import selectPort from '@/components/select/selectPort'
    import { countDamagedPage, countDamagedCount } from "../../../api/shipPlan/shipPlan";
    import recordDetail from '../shipPlan/recordDetail'
    import { newExportExcel } from "@/utils/newExport";
    import { ifHeavyType, tradeType, shipPlanType, damaged } from "@/assets/dict";
    import titlePoint from '../common/title-point'

    export default {
        name: "残损箱查询",
        components: {
            autoSearchEntrust,
            autoSearchSize,
            autoSearchCustom,
            selectPort,
            recordDetail,
            titlePoint
        },
        data() {
            return {
                condition: this.clearForm(),
                list: [],
                recordDetail: false,
                total: 0,
                pageInfo: this.$defalutPage(),
                listLoading: false,
                total: 0,
                zc: 0,
                xc: 0,
                multipleSelection: []
            }
        },
        mounted() {
            let data = sessionStorage.getItem('damaged-params')
            if (data) {
                let time = JSON.parse(data)
                this.condition.search_GTE_createDateTime = time.search_GTE_createDateTime
                this.condition.search_LTE_createDateTime = time.search_LTE_createDateTime
            }
            this.loadData()
        },
        methods: {
            loadData() {
                this.listLoading = true
                let params = this.$assist.copySearchConditions(this.condition)
                countDamagedPage(params).then(res => {
                    this.listLoading = false
                    this.list = res.data.aaData
                    this.total = res.data.iTotalRecords
                    countDamagedCount(params).then(response => {
                        const data = response.data
                        this.total = data.total
                        this.zc = data.zc
                        this.xc = data.xc
                    })
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getRecordDetail(item) {
                this.recordDetail = true
                this.$nextTick(() => {
                    this.$refs.recordDetail.loadData(item.tallyDetailId)
                })
            },
            clearForm() {
                return {
                    search_LIKE_shipName: '',
                    search_LIKE_voyage: '',
                    search_GTE_createDateTime: '',
                    search_LTE_createDateTime: '',
                    search_EQ_planType: '',
                    search_EQ_jobStatus: '',
                    search_LIKE_containerId: '',
                    search_LIKE_containerType: '',
                    search_EQ_portCode: '',
                    search_LIKE_containerSize: '',
                    search_EQ_tradeType: '',
                    search_LIKE_shipAgentName: '',
                }
            },
            handleReset() {
                this.condition = this.clearForm()
            },
            handleExport() {
                if (this.multipleSelection == null || this.multipleSelection.length < 1){
                    this.$message({
                        message: '请勾选需要导出的数据',
                        type: 'warning'
                    })
                    return
                }
                let map = new Map();
                map.set("planType", "计划类型")
                map.set("containerId", "箱号")
                map.set("containerType", "箱型")
                map.set("containerSize", "尺寸")
                map.set("tradeType", "内外贸")
                map.set("ef", "空重")
                map.set("sealNo", "铅封号")
                map.set("damagedCode", "残损代码")
                map.set("damagedExplan", "残损描述")
                map.set("remark", "备注")
                map.set("shipAgentName", "船代")
                map.set("tallyClerk", "理货人")
                map.set("tallyTime", "理货时间")
                let exportRecords = [];
                let exportArr = JSON.parse(JSON.stringify(this.multipleSelection));
                exportArr.forEach(record => {
                    let exportRecord = {};
                    for (let [key, value] of map.entries()) {
                        if (key === "ef") {
                            record[key] = ifHeavyType.get(record[key]);
                        }
                        if (key === "tradeType") {
                            record[key] = tradeType.get(record[key]);
                        }
                        if (key === "damagedCode") {
                            if (record.damagedCode != null && record.damagedCode != '' && record.damagedCode != undefined){
                                let result = ''
                                record.damagedCode.split(',').forEach(function (v) {
                                    result = result + "," +damaged.get(v)
                                })
                                record[key] = result.substr(1);
                            }
                        }
                        exportRecord[value] = record[key];
                    }
                    exportRecords.push(exportRecord);
                });
                newExportExcel("残损查询", exportRecords);
            },
            handleChangeEnd(val) {
                let setVal = val;
                if (val) {
                    setVal = val.split(" ")[0] + " 23:59:59";
                }
                this.condition["search_LTE_createDateTime"] = setVal;
            }
        },
        watch: {
            pageInfo: {
                deep: true,
                handler: function () {
                    this.loadData()
                }
            }
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_createDateTime"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_createDateTime"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : '-'
            }
        }
    }
</script>

<style scoped>

</style>
